<template>
    <div class="adminList">
        <el-table :data="list" border>
            <el-table-column prop="adminid" label="管理员id"></el-table-column>
            <el-table-column prop="adminname" label="管理员名称"></el-table-column>
            <el-table-column prop="password" label="管理员密码"></el-table-column>
            <el-table-column prop="role" label="权限等级"></el-table-column>
            <el-table-column prop="checkedKeys" label="权限列表">
              
                <template #default="{row:{checkedKeys,role}}">
                   <div v-if="role==1">所有页面</div>
                   <div v-else v-for="(item,index) in checkedKeys" :key="index">{{ item }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row:{adminid}}">
                    <el-button size="small">查看</el-button>
                    <el-button size="small">编辑</el-button>
                    <el-button size="small" @click="deleteAdminHandler(adminid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table> 
    </div>
</template>

<script>
import {getAdminListAPI,delAdminAPI} from "@/api/admin";
    export default {
        name:"AdminListView",
        data(){
            return{
                list:[],
            }
        },
        methods:{
            async getAdminList(){
                try{
                    let res = await getAdminListAPI();
                    console.log("管理员列表",res);
                    this.list = res.data;
                }catch(err){
                    this.$message.error(err.message);
                }
            },
            // 删除管理员
            async deleteAdminHandler(adminid){
                console.log(adminid);

                // this.$alert("你在干什么?","警告!");
                // this.$prompt("请输入...","数字");

                this.$confirm("是否删除该用户",null).then(async res=>{
                    console.log("确认",res);
                    try{
                        let res = await delAdminAPI({
                            adminid:adminid,
                        });
                        console.log("删除结果",res);
                        let index= this.list.findIndex(v=>v.adminid == adminid);
                        this.list.splice(index,1);

                    }catch(err){
                        this.$message.error(err.message);
                    }

                }).catch(err=>{
                    console.log("取消",err);
                })

            
            }
        },
        mounted(){
            this.getAdminList();
        }
    }
</script>

<style lang="scss" scoped>

</style>